<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
		<title>预警预报</title>
		<link rel="stylesheet" href="http://gis.hightop.me:8880/arcgis_js_api/library/3.14/3.14/dijit/themes/claro/claro.css" />
		<link rel="stylesheet" href="http://gis.hightop.me:8880/arcgis_js_api/library/3.14/3.14/esri/css/esri.css" />
		<link rel="stylesheet" href="//at.alicdn.com/t/font_620219_te4bti4mccqy3nmi.css" />		
		<link rel="stylesheet" href="../js/utils/tools/bootstrap.min.css">		
		<link rel="stylesheet" href="../js/prediction/dep/bootstrap-table.css" />
		<link rel="stylesheet" href="../js/prediction/dep/bootstrap.css" />
		<link rel="stylesheet" href="../js/layui/css/layui.css" />
		<link rel="stylesheet" href="../css/index.css">
		<link rel="stylesheet" href="../css/map.css" />
		<link rel="stylesheet" type="text/css" href="../css/public.css"/>
		<!--<link rel="stylesheet" href="../css/prediction.css" />-->
		<script>
			var path = location.pathname.replace(/\/[^/]+$/, '').replace(/\/[^/]+$/, '');
			var dojoConfig = {
			  parseOnLoad: true,
			  packages: [
			    {
			      //天地图
			      name: 'TDlib',
			      location: path + '/js/tdlib'
			    },
			    {
			      name: 'Mock',
			      location: path.substring(0, path) + '/node_modules/mockjs/dist/'
			    },
			    {
			      name: 'Utils',
			      location: path + '/js/utils'
			    },
			    {
			      name: 'Modules',
			      location: path + '/js/modules'
			    }
			  ]
			};
		</script>
		<script src="../js/ol.js" type="text/javascript"></script>
		<script src="../js/turf.min.js" type="text/javascript"></script>
		<script src="../js/echarts.min.js" type="text/javascript"></script>
		<script src="../js/layui/layui.js" type="text/javascript"></script>
		<script src="http://gis.hightop.me:8880/arcgis_js_api/library/3.14/3.14/init.js"></script>
		<script src="../js/jquery-1.7.1.min.js" type="text/javascript"></script>
		<script src="../js/kriging.js" type="text/javascript"></script>
		<script src="../js/TDTRoadLayer.js" type="text/javascript"></script>
		<script src="../js/Hawkeye.js" type="text/javascript"></script>
		
		
		<script src="../js/prediction/dep/bootstrap-table.js" type="text/javascript"></script>
		<script src="../js/prediction/dep/bootstrap-table-zh-CN.js" type="text/javascript"></script>
		<script src="../js/prediction/dep/pdf.js" type="text/javascript"></script>
		<script src="../js/prediction/dep/pdf-worker.js" type="text/javascript"></script>
		<script>
			var map = null;
			var weatherlayer = null;//天气图层
			var roadlayer, annolayer, imglayer, imgannolayer;
			var toolbar = null;//工具
			var drawType = 0;//绘制类型
			var loadinglayer;//loading覆盖层
			require([
				"Modules/prediction","esri/map", "esri/geometry/Point", "esri/SpatialReference", "esri/layers/GraphicsLayer",
				"esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/graphic", "esri/geometry/Polygon", "esri/symbols/SimpleFillSymbol"
			], function(Prediction,Map, Point, SpatialReference, GraphicsLayer, SimpleMarkerSymbol, SimpleLineSymbol, Graphic, Polygon, SimpleFillSymbol) {
				map = new Map("map", {
					center: [105.5, 30.6],
					slider: false,
					zoom: 10
				});
				map.on('load', createToolbar);//初始化绘图工具

				defineClassesBeforInitMap();//定义天地图图层
				roadlayer = new TDTRoadLayer();
				var _roadlayer = new TDTRoadLayer();
				annolayer = new TDTAnnoLayer();
				imglayer = new TDTImageLayer();
				imgannolayer = new TDTImgAnnoLayer();
				map.addLayer(roadlayer);
				map.addLayer(annolayer);
				map.addLayer(imglayer);
				imglayer.hide();
				map.addLayer(imgannolayer);
				imgannolayer.hide();
				
				$('#map').startViewMap({ map: map, baselayer: _roadlayer });//鹰眼
				
				addBorder();//添加边界

				weatherlayer = new GraphicsLayer();
				map.addLayer(weatherlayer);

				commonTool();//放大缩小

				initSelect();//区县缩放
				bindEvent();//绑定事件
				initDate();//初始化时间
				
				var prediction = new Prediction();
				prediction.show("map", "#rainfallForecastContainer .panel-body", map);

				function commonTool() {
					$('.zoom-in').on('click', function() {
						if(map.getZoom() < map.getMaxZoom()) {
							map.setZoom(map.getZoom() + 1);
						}
					})
					$('.zoom-out').on('click', function() {
						if(map.getZoom() > map.getMinZoom()) {
							map.setZoom(map.getZoom() - 1);
						}
					})
				}
				//requestWeather();

				map.on('click', function(event) {
					map.infoWindow.hide();
					if(event.graphic && event.graphic.attributes != undefined) {
						var html = "<p><span>站点名称：</span>" + event.graphic.attributes.Station_Name + "<p/>" +
							"<span>温度：</span>" + event.graphic.attributes.TEM + "℃<p/>" +
							"<span>最高气温：</span>" + event.graphic.attributes.TEM_Max_24h + "℃<p/>" +
							"<span>最低气温：</span>" + event.graphic.attributes.TEM_Min_24h + "℃<p/>" +
							"<span>天气现象：</span>" + event.graphic.attributes.WEP + "<p/>" +
							"<span>气压：</span>" + event.graphic.attributes.PRS + "百帕<p/>" +
							"<span>相对湿度：</span>" + event.graphic.attributes.RHU + "%<p/>" +
							"<span>风向：</span>" + event.graphic.attributes.WIN_D + "度<p/>" +
							"<span>风速：</span>" + event.graphic.attributes.WIN_S + "米/秒<p/>";
						map.infoWindow.setTitle("站点详细信息");
						map.infoWindow.setContent(html);
						map.infoWindow.show(event.mapPoint);
					}
				});
			});

			//开始加载
			function startLoad() {
				//加载layui 弹出层组件
				layui.use('layer', function() {
					layer = layui.layer;
					loadinglayer = layer.load(1, {
						shade: [0.5, '#000'] //0.1透明度的白色背景
					});
				});
			}
			//结束加载
			function endLoad(idx) {
				layui.use('layer', function() {
					layer = layui.layer;
					layer.close(loadinglayer);
				});
			}
			// 日期选择
			function initDate() {
				layui.use('laydate', function() {
					var laydate = layui.laydate;
					//执行一个laydate实例
					laydate.render({
						elem: '#dataTimeSelect', //指定元素
						value: new Date()
					});
				});
			}

			function requestWeather() {
				startLoad();
				$.ajax({
					url: 'http://61.157.118.158:8088/sndm/api/sevpChnWefcRffc/getSndmSevpWefcRffc',
					data: {
						Validtime: parseInt($('#timeSelectOptions').val())
					},
					type: 'get',
					dataType: 'json',
					success: function(result) {
						addWeatherLayer(result);
						endLoad(loadinglayer);
					},
					error: function(error) {

					}
				})
			}

			function addWeatherLayer(data) {
				require(["esri/symbols/PictureMarkerSymbol"], function(PictureMarkerSymbol) {
					for(var i = 0; i < data.length; i++) {
						if(!data[i].Lat || !data[i].Lon) continue;
						var point = new esri.geometry.Point(parseFloat(data[i].Lon), parseFloat(data[i].Lat));
						var symbol = new PictureMarkerSymbol(createIcon(data[i].Datetime, data[i].DS[0].WEP), 42, 30);
						data[i].DS[0].staid = data[i].Station_Id_C;
						data[i].DS[0].staname = data[i].Station_Name;
						var graphic = new esri.Graphic(point, symbol, data[i].DS[0]);
						weatherlayer.add(graphic);
					}
				})
			}

			function createIcon(time, code) {
				var timetype = time.substring(10).trim();
				if(timetype == "00:00:00") {
					timetype = 'd';
				} else if(timetype == "12:00:00") {
					timetype = 'n';
				}
				var weathertype = parseInt(code);
				if(weathertype < 10) {
					weathertype = '0' + weathertype;
				}
				var imgurl = 'img/weather/' + timetype + '' + weathertype.toString() + '.gif';
				return imgurl;
			}

			function addBorder() {
				var borderlayer = new esri.layers.GraphicsLayer();
				map.addLayer(borderlayer);

				var csq = "POLYGON((105.72196 30.6448,105.73176 30.6402,105.73216 30.6186,105.73586 30.6102,105.73396 30.6005,105.71546 30.5841,105.71586 30.5669,105.70476 30.5635,105.70396 30.5536,105.70966 30.5421,105.70426 30.5048,105.68246 30.5187,105.67416 30.5111,105.66966 30.4938,105.67166 30.4847,105.65706 30.4784,105.65216 30.4685,105.65396 30.4589,105.64166 30.4487,105.64626 30.439,105.66146 30.4403,105.67356 30.4482,105.68436 30.4463,105.69246 30.4375,105.69716 30.4233,105.70606 30.4185,105.71346 30.3983,105.72476 30.4026,105.74046 30.4141,105.75216 30.418,105.75426 30.4086,105.75046 30.396,105.75656 30.3874,105.76476 30.3758,105.74986 30.3645,105.75256 30.3497,105.74616 30.3423,105.73066 30.3353,105.73756 30.3247,105.72586 30.3197,105.71866 30.3249,105.71966 30.3424,105.72566 30.35,105.70916 30.357,105.70956 30.3741,105.69506 30.3763,105.68786 30.366,105.67586 30.3623,105.66676 30.3859,105.64576 30.3861,105.63486 30.3967,105.63046 30.3912,105.61576 30.3921,105.61216 30.3834,105.60126 30.3818,105.59216 30.3891,105.56206 30.3878,105.55486 30.3945,105.55116 30.4052,105.54016 30.4101,105.53926 30.4256,105.52966 30.4396,105.53346 30.4475,105.52156 30.4565,105.51256 30.4582,105.50626 30.4747,105.50556 30.4876,105.48346 30.5052,105.49366 30.5136,105.48606 30.525,105.48426 30.5398,105.47646 30.5491,105.45326 30.5372,105.44256 30.5381,105.43806 30.548,105.42166 30.551,105.41676 30.567,105.40886 30.5704,105.39976 30.5569,105.38816 30.5649,105.40176 30.5832,105.40856 30.5873,105.40576 30.5962,105.41836 30.6035,105.42256 30.6138,105.43226 30.6198,105.44276 30.6156,105.45116 30.6331,105.47216 30.6355,105.48626 30.6403,105.48896 30.6475,105.49836 30.6529,105.50786 30.6455,105.51656 30.6516,105.52376 30.6401,105.54156 30.6398,105.55046 30.6301,105.56716 30.62,105.59896 30.6386,105.62586 30.6185,105.63486 30.622,105.64766 30.6198,105.65166 30.6271,105.66266 30.6334,105.66816 30.6246,105.67966 30.6273,105.68346 30.6371,105.70036 30.6406,105.70806 30.6585,105.72196 30.6448))";
				var ajq = "POLYGON((105.41676 30.567,105.42166 30.551,105.43806 30.548,105.44256 30.5381,105.45326 30.5372,105.47646 30.5491,105.48426 30.5398,105.48606 30.525,105.49366 30.5136,105.48346 30.5052,105.50556 30.4876,105.50626 30.4747,105.51256 30.4582,105.52156 30.4565,105.53346 30.4475,105.52966 30.4396,105.53926 30.4256,105.54016 30.4101,105.55116 30.4052,105.55486 30.3945,105.56206 30.3878,105.59216 30.3891,105.60126 30.3818,105.61216 30.3834,105.61576 30.3921,105.63046 30.3912,105.63486 30.3967,105.64576 30.3861,105.66676 30.3859,105.67586 30.3623,105.68786 30.366,105.69506 30.3763,105.70956 30.3741,105.70916 30.357,105.72566 30.35,105.71966 30.3424,105.71866 30.3249,105.70816 30.3185,105.71506 30.3104,105.70546 30.3026,105.70966 30.2904,105.72646 30.2685,105.71736 30.2658,105.72026 30.2574,105.70176 30.2597,105.66986 30.2555,105.66496 30.267,105.65716 30.2671,105.64226 30.2761,105.61926 30.2766,105.61676 30.2646,105.60726 30.2587,105.61696 30.2518,105.61676 30.237,105.63286 30.2225,105.65196 30.2236,105.65886 30.2128,105.64206 30.2097,105.63896 30.1892,105.62946 30.1866,105.61486 30.1884,105.60456 30.1811,105.59176 30.1865,105.57656 30.1763,105.56366 30.186,105.55616 30.1855,105.55806 30.1915,105.55536 30.1964,105.55906 30.1991,105.53386 30.2206,105.52656 30.2222,105.51716 30.2049,105.49366 30.2211,105.48716 30.2179,105.47756 30.2282,105.48046 30.2346,105.46976 30.2511,105.45696 30.2586,105.44266 30.2563,105.42106 30.2632,105.41266 30.2819,105.41596 30.2925,105.40346 30.2928,105.37776 30.2788,105.36716 30.2788,105.36326 30.2933,105.34876 30.3055,105.33046 30.3124,105.32426 30.3055,105.29126 30.2973,105.27916 30.2878,105.27276 30.2918,105.26066 30.2877,105.25516 30.2827,105.23376 30.285,105.22726 30.2812,105.21616 30.2922,105.21416 30.3111,105.19806 30.3076,105.19386 30.3137,105.18336 30.3145,105.17406 30.3228,105.16886 30.3188,105.15246 30.3268,105.14476 30.3409,105.11696 30.3487,105.11806 30.3558,105.10516 30.3709,105.10586 30.3823,105.09716 30.3859,105.09586 30.3943,105.08776 30.4035,105.07616 30.41,105.08666 30.4172,105.08606 30.4313,105.10876 30.435,105.11326 30.4455,105.12666 30.4474,105.14196 30.4639,105.16386 30.4729,105.16256 30.4641,105.18096 30.4718,105.19306 30.47,105.19316 30.4779,105.20286 30.4851,105.22366 30.4841,105.23936 30.474,105.23856 30.4619,105.25676 30.449,105.27656 30.4598,105.27946 30.477,105.29356 30.4736,105.30816 30.4597,105.31836 30.4625,105.31886 30.4876,105.33426 30.4953,105.35236 30.4958,105.36016 30.5036,105.36696 30.5191,105.36566 30.5307,105.37556 30.5366,105.37856 30.5463,105.39996 30.5439,105.39976 30.5569,105.40886 30.5704,105.41676 30.567))";
				var pxx = "POLYGON((105.68811 30.92987,105.70129 30.91431,105.72913 30.90771,105.73907 30.89209,105.73688 30.88232,105.72589 30.87952,105.7309 30.86713,105.7431 30.85468,105.75568 30.85071,105.75732 30.84192,105.77588 30.82672,105.77948 30.81628,105.79309 30.80188,105.78528 30.7901,105.77649 30.78387,105.78333 30.76129,105.77869 30.7525,105.79028 30.73889,105.79028 30.71173,105.79852 30.7085,105.80029 30.69849,105.79529 30.69128,105.8103 30.65149,105.80188 30.64148,105.8031 30.63129,105.82031 30.62549,105.82068 30.6037,105.82849 30.59912,105.8349 30.58673,105.86047 30.56653,105.87292 30.5603,105.87408 30.5481,105.86871 30.54388,105.85687 30.51593,105.84308 30.50873,105.84448 30.49213,105.85571 30.48651,105.8587 30.49933,105.87927 30.49969,105.88647 30.48792,105.88129 30.47589,105.87091 30.47211,105.88208 30.46149,105.89148 30.46667,105.90088 30.4621,105.92029 30.47009,105.92609 30.4823,105.93671 30.48749,105.9455 30.48212,105.94531 30.4989,105.92468 30.49628,105.91229 30.5141,105.93011 30.52087,105.9389 30.50653,105.94928 30.50427,105.95508 30.51172,105.96948 30.48889,105.96753 30.48053,105.97131 30.47229,105.96411 30.45532,105.95007 30.45911,105.94409 30.44812,105.95728 30.43048,105.9671 30.43451,105.9729 30.43091,105.97467 30.41949,105.98389 30.41632,105.98889 30.3941,105.99731 30.37909,105.98828 30.37189,105.97992 30.37811,105.9715 30.37549,105.96252 30.38171,105.93988 30.37488,105.93732 30.38269,105.92212 30.38812,105.9137 30.39893,105.89807 30.3891,105.89587 30.40851,105.87451 30.40448,105.8833 30.39551,105.87451 30.38953,105.87128 30.40289,105.86047 30.41309,105.84271 30.39532,105.83569 30.40253,105.84271 30.41388,105.83032 30.42169,105.8241 30.43652,105.81671 30.44031,105.79871 30.43073,105.7793 30.4057,105.76831 30.40668,105.75671 30.38751,105.75049 30.39612,105.75427 30.40869,105.75208 30.41809,105.74048 30.41412,105.72491 30.40271,105.7135 30.39832,105.70612 30.41852,105.69708 30.42328,105.6925 30.4375,105.68451 30.44629,105.67371 30.4483,105.6615 30.44031,105.6463 30.43909,105.64172 30.44873,105.65411 30.45892,105.65228 30.46851,105.6571 30.47852,105.67169 30.48468,105.66968 30.4939,105.67407 30.51111,105.6825 30.51868,105.70428 30.50488,105.70972 30.54211,105.7041 30.55371,105.7049 30.56348,105.71588 30.56689,105.71552 30.58411,105.73389 30.60052,105.7359 30.61029,105.7323 30.61871,105.73169 30.64032,105.72211 30.6449,105.70813 30.65851,105.7005 30.64069,105.68347 30.63708,105.67969 30.62732,105.66827 30.62469,105.66272 30.63348,105.65167 30.62708,105.64771 30.61987,105.63489 30.62207,105.62592 30.61853,105.59888 30.63867,105.56708 30.62012,105.55048 30.63013,105.54169 30.63989,105.52368 30.64008,105.51648 30.65167,105.50787 30.64551,105.49847 30.65289,105.48907 30.64752,105.4881 30.64972,105.48413 30.66748,105.47388 30.67468,105.46228 30.6759,105.45209 30.66492,105.4389 30.6601,105.43329 30.6709,105.45428 30.6803,105.45068 30.68988,105.43329 30.69629,105.43988 30.71307,105.43591 30.72913,105.44531 30.72949,105.45868 30.73633,105.4715 30.73309,105.47791 30.74469,105.48688 30.75049,105.50732 30.7569,105.51611 30.75409,105.52631 30.7677,105.51288 30.77631,105.5119 30.78229,105.53571 30.79108,105.54248 30.80511,105.55328 30.80487,105.56671 30.80908,105.55011 30.82373,105.55731 30.82867,105.56348 30.82233,105.5733 30.8407,105.57568 30.85352,105.58087 30.85449,105.58472 30.87512,105.5921 30.88348,105.59387 30.9071,105.60107 30.9071,105.60687 30.91992,105.62128 30.91388,105.62567 30.91949,105.64691 30.92871,105.6535 30.92688,105.65869 30.91852,105.66589 30.92749,105.68811 30.92987))";
				var shx = "POLYGON((105.37886 31.1546,105.37656 31.1382,105.38296 31.1292,105.38596 31.1142,105.40456 31.0914,105.41316 31.0739,105.42336 31.0796,105.42966 31.0682,105.44046 31.069,105.45236 31.0627,105.47226 31.0656,105.47826 31.0455,105.48686 31.0375,105.51656 31.0294,105.53296 31.0284,105.53656 31.0225,105.55346 31.0105,105.56236 31.0091,105.56906 30.9921,105.58576 30.9859,105.59146 30.9759,105.60116 30.9738,105.61446 30.9788,105.62486 30.9756,105.63966 30.9538,105.64026 30.9487,105.65686 30.943,105.65336 30.9269,105.64676 30.9286,105.62566 30.9194,105.62116 30.9139,105.60686 30.9199,105.60106 30.9071,105.59396 30.907,105.59206 30.8834,105.58466 30.8751,105.58096 30.8544,105.57566 30.8534,105.57326 30.8406,105.56356 30.8222,105.55726 30.8286,105.54996 30.8237,105.56666 30.8091,105.55326 30.8048,105.54246 30.805,105.53556 30.791,105.51176 30.7823,105.51286 30.7763,105.52616 30.7676,105.51606 30.7541,105.50726 30.7568,105.48696 30.7505,105.47776 30.7447,105.47146 30.7331,105.45856 30.7363,105.44516 30.7294,105.43576 30.7291,105.43986 30.713,105.43326 30.6962,105.43266 30.694,105.42366 30.6855,105.40956 30.6784,105.39716 30.6852,105.39166 30.668,105.38136 30.661,105.36366 30.6602,105.36376 30.6401,105.34676 30.6377,105.34816 30.6501,105.32616 30.6593,105.31226 30.6562,105.30606 30.6672,105.29576 30.6646,105.28186 30.6745,105.28436 30.7005,105.26416 30.7098,105.26016 30.6918,105.25616 30.6908,105.24186 30.6697,105.21856 30.6795,105.21006 30.6781,105.20996 30.6899,105.19926 30.6923,105.19496 30.7009,105.20316 30.7102,105.20766 30.7294,105.21576 30.736,105.24056 30.728,105.24826 30.7446,105.25696 30.7432,105.26846 30.7544,105.26426 30.783,105.26476 30.7965,105.26076 30.805,105.25706 30.8278,105.25066 30.8348,105.24206 30.833,105.22876 30.8515,105.22626 30.8783,105.19296 30.8937,105.20326 30.9151,105.19126 30.9189,105.18906 30.9372,105.17286 30.9618,105.18816 30.9647,105.19336 30.9823,105.19206 30.9941,105.18366 31.0063,105.18386 31.0188,105.17916 31.0308,105.17146 31.0368,105.17486 31.0519,105.18616 31.0554,105.19386 31.0677,105.19736 31.0804,105.19056 31.0915,105.19436 31.098,105.20926 31.0988,105.22126 31.1097,105.22646 31.1057,105.24476 31.1068,105.26206 31.1023,105.27616 31.1091,105.28476 31.1034,105.29876 31.1148,105.31466 31.1164,105.32276 31.1218,105.31606 31.1293,105.31936 31.1381,105.33986 31.1271,105.34156 31.1459,105.34946 31.1525,105.35106 31.164,105.37886 31.1546))";
				var dyx = "POLYGON((105.2077 30.72949,105.20331 30.71033,105.19489 30.70093,105.19928 30.69232,105.21008 30.68988,105.21008 30.6781,105.21869 30.6795,105.24188 30.66968,105.25629 30.69092,105.26031 30.69189,105.26428 30.7099,105.28448 30.7005,105.28192 30.6745,105.2959 30.66467,105.30609 30.6673,105.31232 30.65631,105.32629 30.6593,105.34808 30.65009,105.34668 30.6377,105.36389 30.64008,105.36371 30.66028,105.38129 30.66107,105.39172 30.66809,105.39728 30.6853,105.40948 30.67853,105.42371 30.68549,105.43268 30.69409,105.43329 30.69629,105.45068 30.68988,105.45428 30.6803,105.43329 30.6709,105.4389 30.6601,105.45209 30.66492,105.46228 30.6759,105.47388 30.67468,105.48413 30.66748,105.4881 30.64972,105.48907 30.64752,105.48633 30.64032,105.47229 30.6355,105.45129 30.63312,105.44269 30.61572,105.43231 30.61987,105.42249 30.61389,105.41827 30.60352,105.40588 30.59631,105.40869 30.58728,105.40167 30.58331,105.38831 30.56488,105.3999 30.55688,105.40009 30.54388,105.37848 30.54633,105.37549 30.53668,105.36572 30.5307,105.36688 30.5191,105.36029 30.50372,105.35248 30.49591,105.33429 30.4953,105.31891 30.48767,105.31848 30.46252,105.30829 30.45972,105.2937 30.47369,105.27948 30.47711,105.27649 30.4599,105.2569 30.4491,105.23871 30.46191,105.2395 30.47412,105.22369 30.48413,105.20288 30.48511,105.1933 30.47791,105.19312 30.47009,105.18109 30.47192,105.16248 30.46411,105.16388 30.4729,105.14209 30.46393,105.12671 30.44751,105.11328 30.4455,105.10889 30.43512,105.08612 30.43127,105.07129 30.43109,105.0705 30.4447,105.0871 30.44427,105.08789 30.46411,105.07251 30.48468,105.08008 30.48749,105.07208 30.5047,105.06708 30.50671,105.05688 30.5235,105.06671 30.53229,105.06451 30.53809,105.0827 30.55328,105.0863 30.56348,105.0965 30.57727,105.0921 30.58728,105.09991 30.59613,105.10968 30.60028,105.12988 30.62927,105.14868 30.64429,105.14728 30.65332,105.13733 30.65887,105.14069 30.67133,105.1651 30.67828,105.16107 30.68488,105.16791 30.69568,105.1665 30.7085,105.16809 30.7243,105.17908 30.72333,105.19928 30.73431,105.2077 30.72949))";

				var csqsymbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new esri.Color([132, 164, 232]), 1), new esri.Color([132, 164, 232, 0.75]));
				var ajqsymbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new esri.Color([248, 203, 249]), 1), new esri.Color([248, 203, 249, 0.75]));
				var pxxsymbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new esri.Color([173, 209, 255]), 1), new esri.Color([173, 209, 255, 0.75]));
				var shxsymbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new esri.Color([255, 173, 173]), 1), new esri.Color([255, 173, 173, 0.75]));
				var dyxsymbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new esri.Color([255, 239, 168]), 1), new esri.Color([255, 239, 168, 0.75]));

				var csqgraphic = new esri.Graphic(formateData(csq), csqsymbol);
				var ajqgraphic = new esri.Graphic(formateData(ajq), ajqsymbol);
				var pxxgraphic = new esri.Graphic(formateData(pxx), pxxsymbol);
				var shxgraphic = new esri.Graphic(formateData(shx), shxsymbol);
				var dyxgraphic = new esri.Graphic(formateData(dyx), dyxsymbol);

				borderlayer.add(csqgraphic);
				borderlayer.add(ajqgraphic);
				borderlayer.add(pxxgraphic);
				borderlayer.add(shxgraphic);
				borderlayer.add(dyxgraphic);

				var csqcenter = new esri.geometry.Point(105.585, 30.5054);
				var ajqcenter = new esri.geometry.Point(105.408, 30.3707);
				var pxxcenter = new esri.geometry.Point(105.711, 30.6522);
				var shxcenter = new esri.geometry.Point(105.396, 30.9026);
				var dyxcenter = new esri.geometry.Point(105.26, 30.5799);

				var csqtextsymbol = new esri.symbol.TextSymbol("船山区").setColor(new esri.Color([128, 0, 0])).setAlign(esri.symbol.Font.ALIGN_START).setFont(new esri.symbol.Font("12pt").setWeight(esri.symbol.Font.WEIGHT_BOLD));
				var ajqtextsymbol = new esri.symbol.TextSymbol("安居区").setColor(new esri.Color([128, 0, 0])).setAlign(esri.symbol.Font.ALIGN_START).setFont(new esri.symbol.Font("12pt").setWeight(esri.symbol.Font.WEIGHT_BOLD));
				var pxxtextsymbol = new esri.symbol.TextSymbol("蓬溪县").setColor(new esri.Color([128, 0, 0])).setAlign(esri.symbol.Font.ALIGN_START).setFont(new esri.symbol.Font("12pt").setWeight(esri.symbol.Font.WEIGHT_BOLD));
				var shxtextsymbol = new esri.symbol.TextSymbol("射洪县").setColor(new esri.Color([128, 0, 0])).setAlign(esri.symbol.Font.ALIGN_START).setFont(new esri.symbol.Font("12pt").setWeight(esri.symbol.Font.WEIGHT_BOLD));
				var dyxtextsymbol = new esri.symbol.TextSymbol("大英县").setColor(new esri.Color([128, 0, 0])).setAlign(esri.symbol.Font.ALIGN_START).setFont(new esri.symbol.Font("12pt").setWeight(esri.symbol.Font.WEIGHT_BOLD));

				var csqtextgraphic = new esri.Graphic(formateData(csq), csqtextsymbol);
				var ajqtextgraphic = new esri.Graphic(formateData(ajq), ajqtextsymbol);
				var pxxtextgraphic = new esri.Graphic(formateData(pxx), pxxtextsymbol);
				var shxtextgraphic = new esri.Graphic(formateData(shx), shxtextsymbol);
				var dyxtextgraphic = new esri.Graphic(formateData(dyx), dyxtextsymbol);

				borderlayer.add(csqtextgraphic);
				borderlayer.add(ajqtextgraphic);
				borderlayer.add(pxxtextgraphic);
				borderlayer.add(shxtextgraphic);
				borderlayer.add(dyxtextgraphic);
			}

			function formateData(wkt) {
				var feature = (new ol.format.WKT()).readFeature(wkt);
				var geojson = (new ol.format.GeoJSON()).writeFeature(feature);
				var polygon = new esri.geometry.Polygon(JSON.parse(geojson).geometry.coordinates);
				return polygon;
			}

			function initSelect() {
				layui.use('form', function() {
					var form = layui.form;
					var highlayer = new esri.layers.GraphicsLayer();
					map.addLayer(highlayer);
					var highsymbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new esri.Color([0, 147, 232]), 3), new esri.Color([255, 255, 255, 0]));
					form.on('select(time)', function(result) {
						//requestWeather();
					})
					form.on('select(data)', function(result) {
						highlayer.clear();
						switch(result.value) {
							case "0":
								map.centerAndZoom(new esri.geometry.Point([105.5, 30.6]), 10);
								break;
							case "1":
								var wkt = "POLYGON((105.72196 30.6448,105.73176 30.6402,105.73216 30.6186,105.73586 30.6102,105.73396 30.6005,105.71546 30.5841,105.71586 30.5669,105.70476 30.5635,105.70396 30.5536,105.70966 30.5421,105.70426 30.5048,105.68246 30.5187,105.67416 30.5111,105.66966 30.4938,105.67166 30.4847,105.65706 30.4784,105.65216 30.4685,105.65396 30.4589,105.64166 30.4487,105.64626 30.439,105.66146 30.4403,105.67356 30.4482,105.68436 30.4463,105.69246 30.4375,105.69716 30.4233,105.70606 30.4185,105.71346 30.3983,105.72476 30.4026,105.74046 30.4141,105.75216 30.418,105.75426 30.4086,105.75046 30.396,105.75656 30.3874,105.76476 30.3758,105.74986 30.3645,105.75256 30.3497,105.74616 30.3423,105.73066 30.3353,105.73756 30.3247,105.72586 30.3197,105.71866 30.3249,105.71966 30.3424,105.72566 30.35,105.70916 30.357,105.70956 30.3741,105.69506 30.3763,105.68786 30.366,105.67586 30.3623,105.66676 30.3859,105.64576 30.3861,105.63486 30.3967,105.63046 30.3912,105.61576 30.3921,105.61216 30.3834,105.60126 30.3818,105.59216 30.3891,105.56206 30.3878,105.55486 30.3945,105.55116 30.4052,105.54016 30.4101,105.53926 30.4256,105.52966 30.4396,105.53346 30.4475,105.52156 30.4565,105.51256 30.4582,105.50626 30.4747,105.50556 30.4876,105.48346 30.5052,105.49366 30.5136,105.48606 30.525,105.48426 30.5398,105.47646 30.5491,105.45326 30.5372,105.44256 30.5381,105.43806 30.548,105.42166 30.551,105.41676 30.567,105.40886 30.5704,105.39976 30.5569,105.38816 30.5649,105.40176 30.5832,105.40856 30.5873,105.40576 30.5962,105.41836 30.6035,105.42256 30.6138,105.43226 30.6198,105.44276 30.6156,105.45116 30.6331,105.47216 30.6355,105.48626 30.6403,105.48896 30.6475,105.49836 30.6529,105.50786 30.6455,105.51656 30.6516,105.52376 30.6401,105.54156 30.6398,105.55046 30.6301,105.56716 30.62,105.59896 30.6386,105.62586 30.6185,105.63486 30.622,105.64766 30.6198,105.65166 30.6271,105.66266 30.6334,105.66816 30.6246,105.67966 30.6273,105.68346 30.6371,105.70036 30.6406,105.70806 30.6585,105.72196 30.6448))";
								var graphic = new esri.Graphic(formateData(wkt), highsymbol);
								highlayer.add(graphic);
								map.centerAndZoom(new esri.geometry.Point([105.585, 30.5054]), 11);
								break;
							case "2":
								var wkt = "POLYGON((105.41676 30.567,105.42166 30.551,105.43806 30.548,105.44256 30.5381,105.45326 30.5372,105.47646 30.5491,105.48426 30.5398,105.48606 30.525,105.49366 30.5136,105.48346 30.5052,105.50556 30.4876,105.50626 30.4747,105.51256 30.4582,105.52156 30.4565,105.53346 30.4475,105.52966 30.4396,105.53926 30.4256,105.54016 30.4101,105.55116 30.4052,105.55486 30.3945,105.56206 30.3878,105.59216 30.3891,105.60126 30.3818,105.61216 30.3834,105.61576 30.3921,105.63046 30.3912,105.63486 30.3967,105.64576 30.3861,105.66676 30.3859,105.67586 30.3623,105.68786 30.366,105.69506 30.3763,105.70956 30.3741,105.70916 30.357,105.72566 30.35,105.71966 30.3424,105.71866 30.3249,105.70816 30.3185,105.71506 30.3104,105.70546 30.3026,105.70966 30.2904,105.72646 30.2685,105.71736 30.2658,105.72026 30.2574,105.70176 30.2597,105.66986 30.2555,105.66496 30.267,105.65716 30.2671,105.64226 30.2761,105.61926 30.2766,105.61676 30.2646,105.60726 30.2587,105.61696 30.2518,105.61676 30.237,105.63286 30.2225,105.65196 30.2236,105.65886 30.2128,105.64206 30.2097,105.63896 30.1892,105.62946 30.1866,105.61486 30.1884,105.60456 30.1811,105.59176 30.1865,105.57656 30.1763,105.56366 30.186,105.55616 30.1855,105.55806 30.1915,105.55536 30.1964,105.55906 30.1991,105.53386 30.2206,105.52656 30.2222,105.51716 30.2049,105.49366 30.2211,105.48716 30.2179,105.47756 30.2282,105.48046 30.2346,105.46976 30.2511,105.45696 30.2586,105.44266 30.2563,105.42106 30.2632,105.41266 30.2819,105.41596 30.2925,105.40346 30.2928,105.37776 30.2788,105.36716 30.2788,105.36326 30.2933,105.34876 30.3055,105.33046 30.3124,105.32426 30.3055,105.29126 30.2973,105.27916 30.2878,105.27276 30.2918,105.26066 30.2877,105.25516 30.2827,105.23376 30.285,105.22726 30.2812,105.21616 30.2922,105.21416 30.3111,105.19806 30.3076,105.19386 30.3137,105.18336 30.3145,105.17406 30.3228,105.16886 30.3188,105.15246 30.3268,105.14476 30.3409,105.11696 30.3487,105.11806 30.3558,105.10516 30.3709,105.10586 30.3823,105.09716 30.3859,105.09586 30.3943,105.08776 30.4035,105.07616 30.41,105.08666 30.4172,105.08606 30.4313,105.10876 30.435,105.11326 30.4455,105.12666 30.4474,105.14196 30.4639,105.16386 30.4729,105.16256 30.4641,105.18096 30.4718,105.19306 30.47,105.19316 30.4779,105.20286 30.4851,105.22366 30.4841,105.23936 30.474,105.23856 30.4619,105.25676 30.449,105.27656 30.4598,105.27946 30.477,105.29356 30.4736,105.30816 30.4597,105.31836 30.4625,105.31886 30.4876,105.33426 30.4953,105.35236 30.4958,105.36016 30.5036,105.36696 30.5191,105.36566 30.5307,105.37556 30.5366,105.37856 30.5463,105.39996 30.5439,105.39976 30.5569,105.40886 30.5704,105.41676 30.567))";
								var graphic = new esri.Graphic(formateData(wkt), highsymbol);
								highlayer.add(graphic);
								map.centerAndZoom(new esri.geometry.Point([105.408, 30.3707]), 11);
								break;
							case "3":
								var wkt = "POLYGON((105.68811 30.92987,105.70129 30.91431,105.72913 30.90771,105.73907 30.89209,105.73688 30.88232,105.72589 30.87952,105.7309 30.86713,105.7431 30.85468,105.75568 30.85071,105.75732 30.84192,105.77588 30.82672,105.77948 30.81628,105.79309 30.80188,105.78528 30.7901,105.77649 30.78387,105.78333 30.76129,105.77869 30.7525,105.79028 30.73889,105.79028 30.71173,105.79852 30.7085,105.80029 30.69849,105.79529 30.69128,105.8103 30.65149,105.80188 30.64148,105.8031 30.63129,105.82031 30.62549,105.82068 30.6037,105.82849 30.59912,105.8349 30.58673,105.86047 30.56653,105.87292 30.5603,105.87408 30.5481,105.86871 30.54388,105.85687 30.51593,105.84308 30.50873,105.84448 30.49213,105.85571 30.48651,105.8587 30.49933,105.87927 30.49969,105.88647 30.48792,105.88129 30.47589,105.87091 30.47211,105.88208 30.46149,105.89148 30.46667,105.90088 30.4621,105.92029 30.47009,105.92609 30.4823,105.93671 30.48749,105.9455 30.48212,105.94531 30.4989,105.92468 30.49628,105.91229 30.5141,105.93011 30.52087,105.9389 30.50653,105.94928 30.50427,105.95508 30.51172,105.96948 30.48889,105.96753 30.48053,105.97131 30.47229,105.96411 30.45532,105.95007 30.45911,105.94409 30.44812,105.95728 30.43048,105.9671 30.43451,105.9729 30.43091,105.97467 30.41949,105.98389 30.41632,105.98889 30.3941,105.99731 30.37909,105.98828 30.37189,105.97992 30.37811,105.9715 30.37549,105.96252 30.38171,105.93988 30.37488,105.93732 30.38269,105.92212 30.38812,105.9137 30.39893,105.89807 30.3891,105.89587 30.40851,105.87451 30.40448,105.8833 30.39551,105.87451 30.38953,105.87128 30.40289,105.86047 30.41309,105.84271 30.39532,105.83569 30.40253,105.84271 30.41388,105.83032 30.42169,105.8241 30.43652,105.81671 30.44031,105.79871 30.43073,105.7793 30.4057,105.76831 30.40668,105.75671 30.38751,105.75049 30.39612,105.75427 30.40869,105.75208 30.41809,105.74048 30.41412,105.72491 30.40271,105.7135 30.39832,105.70612 30.41852,105.69708 30.42328,105.6925 30.4375,105.68451 30.44629,105.67371 30.4483,105.6615 30.44031,105.6463 30.43909,105.64172 30.44873,105.65411 30.45892,105.65228 30.46851,105.6571 30.47852,105.67169 30.48468,105.66968 30.4939,105.67407 30.51111,105.6825 30.51868,105.70428 30.50488,105.70972 30.54211,105.7041 30.55371,105.7049 30.56348,105.71588 30.56689,105.71552 30.58411,105.73389 30.60052,105.7359 30.61029,105.7323 30.61871,105.73169 30.64032,105.72211 30.6449,105.70813 30.65851,105.7005 30.64069,105.68347 30.63708,105.67969 30.62732,105.66827 30.62469,105.66272 30.63348,105.65167 30.62708,105.64771 30.61987,105.63489 30.62207,105.62592 30.61853,105.59888 30.63867,105.56708 30.62012,105.55048 30.63013,105.54169 30.63989,105.52368 30.64008,105.51648 30.65167,105.50787 30.64551,105.49847 30.65289,105.48907 30.64752,105.4881 30.64972,105.48413 30.66748,105.47388 30.67468,105.46228 30.6759,105.45209 30.66492,105.4389 30.6601,105.43329 30.6709,105.45428 30.6803,105.45068 30.68988,105.43329 30.69629,105.43988 30.71307,105.43591 30.72913,105.44531 30.72949,105.45868 30.73633,105.4715 30.73309,105.47791 30.74469,105.48688 30.75049,105.50732 30.7569,105.51611 30.75409,105.52631 30.7677,105.51288 30.77631,105.5119 30.78229,105.53571 30.79108,105.54248 30.80511,105.55328 30.80487,105.56671 30.80908,105.55011 30.82373,105.55731 30.82867,105.56348 30.82233,105.5733 30.8407,105.57568 30.85352,105.58087 30.85449,105.58472 30.87512,105.5921 30.88348,105.59387 30.9071,105.60107 30.9071,105.60687 30.91992,105.62128 30.91388,105.62567 30.91949,105.64691 30.92871,105.6535 30.92688,105.65869 30.91852,105.66589 30.92749,105.68811 30.92987))";
								var graphic = new esri.Graphic(formateData(wkt), highsymbol);
								highlayer.add(graphic);
								map.centerAndZoom(new esri.geometry.Point([105.711, 30.6522]), 11);
								break;
							case "4":
								var wkt = "POLYGON((105.37886 31.1546,105.37656 31.1382,105.38296 31.1292,105.38596 31.1142,105.40456 31.0914,105.41316 31.0739,105.42336 31.0796,105.42966 31.0682,105.44046 31.069,105.45236 31.0627,105.47226 31.0656,105.47826 31.0455,105.48686 31.0375,105.51656 31.0294,105.53296 31.0284,105.53656 31.0225,105.55346 31.0105,105.56236 31.0091,105.56906 30.9921,105.58576 30.9859,105.59146 30.9759,105.60116 30.9738,105.61446 30.9788,105.62486 30.9756,105.63966 30.9538,105.64026 30.9487,105.65686 30.943,105.65336 30.9269,105.64676 30.9286,105.62566 30.9194,105.62116 30.9139,105.60686 30.9199,105.60106 30.9071,105.59396 30.907,105.59206 30.8834,105.58466 30.8751,105.58096 30.8544,105.57566 30.8534,105.57326 30.8406,105.56356 30.8222,105.55726 30.8286,105.54996 30.8237,105.56666 30.8091,105.55326 30.8048,105.54246 30.805,105.53556 30.791,105.51176 30.7823,105.51286 30.7763,105.52616 30.7676,105.51606 30.7541,105.50726 30.7568,105.48696 30.7505,105.47776 30.7447,105.47146 30.7331,105.45856 30.7363,105.44516 30.7294,105.43576 30.7291,105.43986 30.713,105.43326 30.6962,105.43266 30.694,105.42366 30.6855,105.40956 30.6784,105.39716 30.6852,105.39166 30.668,105.38136 30.661,105.36366 30.6602,105.36376 30.6401,105.34676 30.6377,105.34816 30.6501,105.32616 30.6593,105.31226 30.6562,105.30606 30.6672,105.29576 30.6646,105.28186 30.6745,105.28436 30.7005,105.26416 30.7098,105.26016 30.6918,105.25616 30.6908,105.24186 30.6697,105.21856 30.6795,105.21006 30.6781,105.20996 30.6899,105.19926 30.6923,105.19496 30.7009,105.20316 30.7102,105.20766 30.7294,105.21576 30.736,105.24056 30.728,105.24826 30.7446,105.25696 30.7432,105.26846 30.7544,105.26426 30.783,105.26476 30.7965,105.26076 30.805,105.25706 30.8278,105.25066 30.8348,105.24206 30.833,105.22876 30.8515,105.22626 30.8783,105.19296 30.8937,105.20326 30.9151,105.19126 30.9189,105.18906 30.9372,105.17286 30.9618,105.18816 30.9647,105.19336 30.9823,105.19206 30.9941,105.18366 31.0063,105.18386 31.0188,105.17916 31.0308,105.17146 31.0368,105.17486 31.0519,105.18616 31.0554,105.19386 31.0677,105.19736 31.0804,105.19056 31.0915,105.19436 31.098,105.20926 31.0988,105.22126 31.1097,105.22646 31.1057,105.24476 31.1068,105.26206 31.1023,105.27616 31.1091,105.28476 31.1034,105.29876 31.1148,105.31466 31.1164,105.32276 31.1218,105.31606 31.1293,105.31936 31.1381,105.33986 31.1271,105.34156 31.1459,105.34946 31.1525,105.35106 31.164,105.37886 31.1546))";
								var graphic = new esri.Graphic(formateData(wkt), highsymbol);
								highlayer.add(graphic);
								map.centerAndZoom(new esri.geometry.Point([105.396, 30.9026]), 11);
								break;
							case "5":
								var wkt = "POLYGON((105.2077 30.72949,105.20331 30.71033,105.19489 30.70093,105.19928 30.69232,105.21008 30.68988,105.21008 30.6781,105.21869 30.6795,105.24188 30.66968,105.25629 30.69092,105.26031 30.69189,105.26428 30.7099,105.28448 30.7005,105.28192 30.6745,105.2959 30.66467,105.30609 30.6673,105.31232 30.65631,105.32629 30.6593,105.34808 30.65009,105.34668 30.6377,105.36389 30.64008,105.36371 30.66028,105.38129 30.66107,105.39172 30.66809,105.39728 30.6853,105.40948 30.67853,105.42371 30.68549,105.43268 30.69409,105.43329 30.69629,105.45068 30.68988,105.45428 30.6803,105.43329 30.6709,105.4389 30.6601,105.45209 30.66492,105.46228 30.6759,105.47388 30.67468,105.48413 30.66748,105.4881 30.64972,105.48907 30.64752,105.48633 30.64032,105.47229 30.6355,105.45129 30.63312,105.44269 30.61572,105.43231 30.61987,105.42249 30.61389,105.41827 30.60352,105.40588 30.59631,105.40869 30.58728,105.40167 30.58331,105.38831 30.56488,105.3999 30.55688,105.40009 30.54388,105.37848 30.54633,105.37549 30.53668,105.36572 30.5307,105.36688 30.5191,105.36029 30.50372,105.35248 30.49591,105.33429 30.4953,105.31891 30.48767,105.31848 30.46252,105.30829 30.45972,105.2937 30.47369,105.27948 30.47711,105.27649 30.4599,105.2569 30.4491,105.23871 30.46191,105.2395 30.47412,105.22369 30.48413,105.20288 30.48511,105.1933 30.47791,105.19312 30.47009,105.18109 30.47192,105.16248 30.46411,105.16388 30.4729,105.14209 30.46393,105.12671 30.44751,105.11328 30.4455,105.10889 30.43512,105.08612 30.43127,105.07129 30.43109,105.0705 30.4447,105.0871 30.44427,105.08789 30.46411,105.07251 30.48468,105.08008 30.48749,105.07208 30.5047,105.06708 30.50671,105.05688 30.5235,105.06671 30.53229,105.06451 30.53809,105.0827 30.55328,105.0863 30.56348,105.0965 30.57727,105.0921 30.58728,105.09991 30.59613,105.10968 30.60028,105.12988 30.62927,105.14868 30.64429,105.14728 30.65332,105.13733 30.65887,105.14069 30.67133,105.1651 30.67828,105.16107 30.68488,105.16791 30.69568,105.1665 30.7085,105.16809 30.7243,105.17908 30.72333,105.19928 30.73431,105.2077 30.72949))";
								var graphic = new esri.Graphic(formateData(wkt), highsymbol);
								highlayer.add(graphic);
								map.centerAndZoom(new esri.geometry.Point([105.26, 30.5799]), 11);
								break;
						}
					});
				});
			}

			//绑定点击事件
			function bindEvent() {
				$('#roadnetworktool').on('click', function() {
					$(this).css('color', '#2C9EFF');
					$('#planettool').css('color', '#000');
					roadlayer.show();
					annolayer.show();
					imglayer.hide();
					imgannolayer.hide();
				})
				$('#planettool').on('click', function() {
					$(this).css('color', '#2C9EFF');
					$('#roadnetworktool').css('color', '#000');
					roadlayer.hide();
					annolayer.hide();
					imglayer.show();
					imgannolayer.show();
				})
				$('#fullextenttool').on('click', function() {
					map.centerAndZoom(new esri.geometry.Point([105.5, 30.6]), 10);
				})
				$('#distancetool').on('click', function() {
					drawType = 1;
					activeTool('POLYLINE');
				})
				$('#areatool').on('click', function() {
					drawType = 1;
					activeTool('POLYGON');
				})
				$('#rectangletool').on('click', function() {
					drawType = 2;
					activeTool('RECTANGLE');
				})
				$('#polygontool').on('click', function() {
					drawType = 2;
					activeTool('POLYGON');
				})
				$('#cleartool').on('click', function() {
					map.graphics.clear();
				})
				
				$('#toolbar').on('click', function() {
					if(!$(this).hasClass('active')){
						$(this).addClass('active');
						$('.operatebar').show();
					}else{
						$(this).removeClass('active');
						$('.operatebar').hide();
					}
				})
				$('#legendbar').on('click', function() {
					if(!$(this).hasClass('active')){
						$(this).addClass('active');
					}else{
						$(this).removeClass('active');
					}
				})
				
				//控制面板的显隐
				$('.openTrol').click(function() {
					$('#rainfallForecastContainer').hide();
					$('.conceal').show();
				});
				$('.conceal').click(function() {
					$('.conceal').hide();
					$('#rainfallForecastContainer').show();
				});
			}

			function createToolbar() {
				require([
					"esri/toolbars/draw"
				], function(Draw) {
					toolbar = new Draw(map);
					toolbar.on('draw-end', drawToMap)
				});
			}

			function activeTool(gettype) {
				require([
					"esri/toolbars/draw"
				], function(Draw) {
					toolbar.activate(Draw[gettype]);
				});
			}

			function drawToMap(event) {
				switch(drawType) {
					case 1:
						measureMap(event);
						break;
					case 2:
						addGraphicToMap(event)
						break;
				}
			}

			function addGraphicToMap(event) {
				require([
					"esri/symbols/SimpleMarkerSymbol",
					"esri/symbols/SimpleLineSymbol",
					"esri/symbols/SimpleFillSymbol"
				], function(SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol) {
					var symbol;
					toolbar.deactivate();
					var text = "";
					var point;
					switch(event.geometry.type) {
						case "point":
						case "multipoint":
							symbol = new SimpleMarkerSymbol();
							break;
						case "polyline":
							symbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new esri.Color([240, 197, 54]), 2);
							break;
						default:
							symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new esri.Color([255, 255, 255]), 2), new esri.Color([240, 197, 54, 0.5]));
							break;
					}
					var graphic = new esri.Graphic(event.geometry, symbol);
					map.graphics.add(graphic);
				});
			}

			function measureMap(event) {
				require([
					"esri/symbols/SimpleMarkerSymbol",
					"esri/symbols/SimpleLineSymbol",
					"esri/symbols/SimpleFillSymbol",
					"esri/geometry/geometryEngine", "esri/symbols/TextSymbol", "esri/Color", "esri/symbols/Font"
				], function(SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, geometryEngine, TextSymbol, Color, Font) {
					var symbol;
					toolbar.deactivate();
					var text = "";
					var point;
					switch(event.geometry.type) {
						case "point":
						case "multipoint":
							symbol = new SimpleMarkerSymbol();
							break;
						case "polyline":
							symbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new esri.Color([240, 197, 54]), 2);
							break;
						default:
							symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new esri.Color([255, 255, 255]), 2), new esri.Color([240, 197, 54, 0.5]));
							break;
					}
					var graphic = new esri.Graphic(event.geometry, symbol);
					map.graphics.add(graphic);

					var geom = deepClone(event.geometry);
					switch(geom.type) {
						case "polyline":
							geom.spatialReference = {
								wkid: 4326
							};
							text = geometryEngine.geodesicLength(geom, "meters");
							if(text > 1000) {
								text = (text / 1000).toFixed(2) + "千米";
							} else {
								text = text.toFixed(2) + "米";
							}
							var paths = geom.paths;
							point = new esri.geometry.Point(paths[0][paths[0].length - 1][0], paths[0][paths[0].length - 1][1]);
							break;
						default:
							geom.spatialReference = {
								wkid: 4326
							};
							text = geometryEngine.geodesicArea(geom, "square-meters");
							if(text > 1000000) {
								text = (text / 1000000).toFixed(2) + "平方千米";
							} else {
								text = text.toFixed(2) + "平方米";
							}
							var rings = geom.rings;
							point = new esri.geometry.Point(rings[0][rings[0].length - 2][0], rings[0][rings[0].length - 2][1]);
							break;
					}

					var font = new Font();
					font.setSize('12pt');
					font.setWeight(Font.WEIGHT_BOLD);
					var textymbol = new esri.symbol.TextSymbol(text).setColor(new esri.Color([128, 0, 0])).setAlign(esri.symbol.Font.ALIGN_MIDDLE).setFont(new esri.symbol.Font("18pt").setWeight(esri.symbol.Font.WEIGHT_BOLD));
					var textgraphic = new esri.Graphic(point, textymbol);
					map.graphics.add(textgraphic);
				});
			}
			//深拷贝
			function deepClone(data) {
				var type = getType(data);
				var obj;
				if(type === 'array') {
					obj = [];
				} else if(type === 'object') {
					obj = {};
				} else {
					//不再具有下一层次
					return data;
				}
				if(type === 'array') {
					for(var i = 0, len = data.length; i < len; i++) {
						obj.push(deepClone(data[i]));
					}
				} else if(type === 'object') {
					for(var key in data) {
						obj[key] = deepClone(data[key]);
					}
				}
				return obj;
			}

			function getType(obj) {
				//tostring会返回对应不同的标签的构造函数
				var toString = Object.prototype.toString;
				var map = {
					'[object Boolean]': 'boolean',
					'[object Number]': 'number',
					'[object String]': 'string',
					'[object Function]': 'function',
					'[object Array]': 'array',
					'[object Date]': 'date',
					'[object RegExp]': 'regExp',
					'[object Undefined]': 'undefined',
					'[object Null]': 'null',
					'[object Object]': 'object'
				};
				if(obj instanceof Element) {
					return 'element';
				}
				return map[toString.call(obj)];
			}
		</script>
	</head>

	<body>
		<div id="map" class="sn-body">
			<div class="slider-box">
				<div class="zoom-in zoombtn">
					<span>+</span>
				</div>
				<div class="zoom-out zoombtn">
					<span>-</span>
				</div>
			</div>
		</div>
		<form class="layui-form" action="">
			<div id="timePickContainer" class="panel panel-primary">
				<div class="select-panel">
					<div style="width: 120px;float: left;">
						<input type="text" class="form-control" id="dataTimeSelect">
					</div>
					<div style="width: 100px;float: left;">
						<select class="form-control selectStyle" name="time" lay-filter="time" id="timeSelectOptions">
							<!-- 四川区域模式 -->
							<option value=2>2时</option>
							<option value=8>8时</option>
							<option value=12 selected>12时</option>
							<option value=14>14时</option>
							<option value=20>20时</option>
						</select>
					</div>
					<div style="width: 120px;float: left;">
						<select class="form-control selectStyle" name="area" lay-filter="data" id="areaSelectOptions">
							<option value="0" >遂宁市</option>
							<option value="1">船山区</option>
							<option value="2">安居区</option>
							<option value="3">蓬溪县</option>
							<option value="4">射洪县</option>
							<option value="5">大英县</option>
						</select>
					</div>
				</div>
			</div>
		</form>
		<!--工具等内容-->
		<div class="tools-box">
			<ul class="toolList">
				<li id="toolbar">
					<i class="iconfont icon-gongju"></i>
					<!--<b class="wrench"></b>-->
					<span>工具</span>
				</li>
				<li class="line">|</li>
				<li id="legendbar">
					<i class="iconfont icon-ditu"></i>
					<span>图例</span>
				</li>
			</ul>
		</div>
		<!--警告信息-->
		<div class="warn-box">
			<i class="iconfont icon-laba"></i>
			<div class="warnCon lf">
				<marquee direction="left" scrollamount="100" scrolldelay="1000">
					降水报警：降水为100毫米，降水为100毫米
				</marquee>
			</div>
		</div>
		<div class="operatebar commontool sn-tool">
			<div class="middlebox">
				<div class="editbtn" id="roadnetworktool">
					<i class="iconfont icon-vector"></i>
					<span>矢量</span>
				</div>
				<div class="editbtn" id="planettool">
					<i class="iconfont icon-weixing"></i>
					<span>影像</span>
				</div>
				<div class="editbtn" id="fullextenttool">
					<i class="iconfont icon-quantu"></i>
					<span>全图</span>
				</div>
				<div class="editbtn" id="distancetool">
					<i class="iconfont icon-celiang1"></i>
					<span>测距</span>
				</div>
				<div class="editbtn" id="areatool">
					<i class="iconfont icon-mianji"></i>
					<span>面积</span>
				</div>
				<div class="editbtn" id="rectangletool">
					<i class="iconfont icon-box-select"></i>
					<span>框选</span>
				</div>
				<div class="editbtn" id="polygontool">
					<i class="iconfont icon-xuanze"></i>
					<span>自由选择</span>
				</div>
				<div class="editbtn" id="weatherplot">
					<i class="iconfont icon-icon-mian"></i>
					<span>气象标绘</span>
				</div>
				<div class="editbtn" id="cleartool" style="border: none;">
					<i class="iconfont icon-clean"></i>
					<span>清除</span>
				</div>
			</div>
		</div>
	<!--控制面板的按钮-->
		<div class="conceal rt">
			&lt;&lt;<span>控制面板</span>
		</div>
		<div id="rainfallForecastContainer" class="panel panel-primary">

			<div class="panel-heading">
				<p class="topTip lf">控制面板</p>
				<div class="openTrol rt">
					<span>隐藏</span>&gt;&gt;
				</div>
				</h3>
			</div>
			<div class="panel-body">				
			</div>
		</div>
		<!--<form class="layui-form" action="">
			<div class="selectBox layui-form-item" style="position: absolute;left: 95px;top: 53px;">
				<select name="area" lay-filter="data">
					<option value="0" selected>遂宁市</option>
					<option value="1">船山区</option>
					<option value="2">安居区</option>
					<option value="3">蓬溪县</option>
					<option value="4">射洪县</option>
					<option value="5">大英县</option>
				</select>
			</div>
		</form>-->
	</body>

</html>